<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <title>OA-app Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/dist/css/oa-app.css">
    <style>
        #app{
            padding: 5px;
        }
        .daiMa {

        }

        xmp {
            padding: 0;
            margin: 0;
            height: 200px;
            overflow-y: scroll;
            background: #d3e8fd !important;
        }

        .title {
            text-align: center;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="app">
    <h3 style="text-align: center">APP 常用组件</h3>

    <h5>顶部一级标签 （滚动）</h5>
    <iframe src="/page/appDemo/tabScroll.html" frameborder="0" style="width: 100%;height: 50px;"></iframe>
    <div class="daiMa">
        <xmp>
            <div class="oa-tab-scroll">
                <div class="oa-slide ">
                    <div :class="selectIndex==0? 'tabActive':'tabNo'" @click="selectIndex=0;">标签一</div>
                    <div :class="selectIndex==1? 'tabActive':'tabNo'" @click="selectIndex=1;">标签二</div>
                    <div :class="selectIndex==2?'tabActive':'tabNo'" @click="selectIndex=2;">标签三</div>
                    <div :class="selectIndex==3? 'tabActive':'tabNo'" @click="selectIndex=3;">标签四</div>
                    <div :class="selectIndex==4? 'tabActive':'tabNo'" @click="selectIndex=4;">标签五</div>
                </div>
            </div>

            <script>
                var app = new Vue({
                    el: '#app',
                    data: {
                        selectIndex: 0,
                    },
                    methods: {}
                })
            </script>
        </xmp>
    </div>

    <h5>顶部一级标签（非滚动-内容固定）</h5>
    <iframe src="/page/appDemo/tab.html" frameborder="0" style="width: 100%;height: 50px;"></iframe>
    <div class="daiMa">
        <xmp>
            <div class="oa-tab">
                <div class="oa-tab-left"></div>
                <div class="oa-tab-middle">
                    <span :class="selectIndex==0? 'tabActive':'tabNo'" @click="selectIndex=0;">标签一</span>
                    <span :class="selectIndex==1? 'tabActive':'tabNo'" @click="selectIndex=1;">标签二</span>
                    <span :class="selectIndex==2?'tabActive':'tabNo'" @click="selectIndex=2;">标签三</span>
                </div>
                <div class="oa-tab-right"></div>
            </div>

            <script>
                var app = new Vue({
                    el: '#app',
                    data: {
                        selectIndex: 0,
                    },
                    methods: {}
                })
            </script>
        </xmp>
    </div>

    <h5>顶部二级标签</h5>
    <iframe src="/page/appDemo/tabSmall.html" frameborder="0" style="width: 100%;height: 50px;"></iframe>
    <div class="daiMa">
        <xmp>
            <div class="oa-tab-small">
                <span :class="selectIndex==0? 'tabActive':'tabNo'" >
                    <span class="oa-name" >全部</span>
                </span>
                        <span :class="selectIndex==1? 'tabActive':'tabNo'" >
                    <span class="oa-name" >曹国玉</span>
                </span>
                        <span :class="selectIndex==2? 'tabActive':'tabNo'" >
                    <span class="oa-name" >孙强</span>
                </span>
                        <span :class="selectIndex==3? 'tabActive':'tabNo'" >
                  不需俩端对齐
                </span>
            </div>

            <script>
                var app = new Vue({
                    el: '#app',
                    data: {
                        selectIndex: 0,
                    },
                    methods: {}
                })
            </script>
        </xmp>
    </div>

    <h5>表格</h5>
    <iframe src="/page/appDemo/table.html" frameborder="0" style="width: 100%;height: 140px;"></iframe>
    <div class="daiMa">
        <xmp>
            <table class="oa-table ">
                <thead>
                <tr class="oa-table-title">
                    <th>蓝色表头</th>
                </tr>
                </thead>
            </table>
            <table class="oa-table ">
                <thead>
                <tr class="oa-table-title-gray">
                    <th style="width:35px;">序号</th>
                    <th style="width: 100px">超出隐藏</th>
                    <th style="text-align: left">俩行显示</th>
                    <th style="width: 50px">创建人</th>
                    <th style="width: 50px">操作</th>
                </tr>
                </thead>
            </table>
            <table class="oa-table">
                <tbody>
                <tr class="oa-lineTwo-H">
                    <td style="width:35px;">1</td>
                    <td style="width: 100px" class="oa-lineOne" @click.stop="showMore($event.target)">(注：需指定宽度) 内容内容内容内容内容内容内容内容内容内容内容内容</td>
                    <td  style="text-align: left" ><div class="oa-lineTwo" @click.stop="showMore($event.target)">默认设置在36行高下俩行显示。其他行高应用场景（设置max-height为总高度，设置line-height为单行高度，需加'!important'）</div></td>
                    <td style="width: 50px"><div class="oa-name">李冰</div></td>
                    <td style="width: 50px" class="oaColor">确定</td>
                </tr>
                <tr class="oa-lineTwo-H">
                    <td>1</td>
                    <td>附件</td>
                    <td>
                        <div class="oa-fj" @click="lookFj(fj.attrUrl)">
                            <b :class="fjStyle(fj.attrName)"></b>
                            <div class="name"  :title="fj.attrName">
                                {{fj.attrName}}
                            </div>
                            <div class="del">删除</div>
                        </div>
                    </td>
                    <td><button class="oa-btn">上传</button></td>
                    <td></td>
                </tr>
                </tbody>
            </table>

            <script>
                var app = new Vue({
                    el: '#app',
                    data: {
                        selectIndex:0,
                    },
                    methods: {
                        //查看更多
                        showMore: function (event) {
                            var el = event
                            var text = el.innerText;
                            if (text != "") {
                                text = "<i></i>" + text;
                                var mydiv = document.getElementById("oa-more");
                                if (!mydiv) {
                                    var div = document.createElement("div");
                                    div.setAttribute("id", "oa-more");
                                    document.body.appendChild(div);
                                    mydiv = document.getElementById("oa-more");
                                }
                                if (mydiv.offsetParent === null) {
                                    mydiv.style.display = 'block';
                                    mydiv.innerHTML = text;
                                    mydiv.style.width = el.offsetWidth + 'px';
                                    mydiv.style.left = el.getBoundingClientRect().left + 'px';
                                    console.log(el.height)
                                    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop || 0;
                                    mydiv.style.top = ( scrollTop + el.getBoundingClientRect().top + el.offsetHeight + "px")
                                } else {
                                    mydiv.style.display = 'none';
                                }

                            } else {
                                var mydiv = document.getElementById("oa-more");
                                mydiv.style.display = 'none';
                            }

                            document.onclick = function () {
                                var mydiv = document.getElementById("oa-more");
                                if (mydiv) {
                                    mydiv.style.display = "none";
                                }
                            };
                        },
                        fjStyle: function (fjName) {
                            //传入附件名称 返回对应附件类型的样式用于展示
                            if (fjName) {
                                var type = fjName.substring(fjName.lastIndexOf('.') + 1);
                                return 'img fj-' + type
                            }
                            return 'img'
                        }
                    }

                })
            </script>
        </xmp>
    </div>

    <h5>按钮</h5>
    <iframe src="/page/appDemo/button.html" frameborder="0" style="width: 100%;height: 140px;"></iframe>
    <div class="daiMa">
        <xmp style="height:100px;">
            <div style="text-align: center;">
                <button class="oa-btn">普通按钮</button>
            </div>
            <div class="oa-footer-btn" >底部单一按钮</div>
            <div class="oa-footer-btns"><div>底部双按钮</div><div>底部双按钮</div><i></i></div>
        </xmp>
    </div>

    <h5>滚动加载</h5>
    <iframe src="/page/appDemo/scrollPage.html" frameborder="0" style="width: 100%;height: 140px;"></iframe>
    <div class="daiMa" style="text-align: center">
        <a href="/page/appDemo/scrollPage.html">进入页面查看</a>
    </div>

    <h5>监听滚动到底部 js代码</h5>
    <div class="daiMa">
        <xmp>
            <script>
                window.onscroll = function(){
                    //变量scrollTop是滚动条滚动时，距离顶部的距离
                    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                    //变量windowHeight是可视区的高度
                    var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                    //变量scrollHeight是滚动条的总高度
                    var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
                    //滚动条到底部的条件
                    if(scrollTop+windowHeight==scrollHeight){
                        //写后台加载数据的函数
                        console.log("滚动到底部了");
                    }
                }
            </script>

        </xmp>
    </div>
</div>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="https://file.ggxqce.com/web/axios.min.js"></script>

<script src="/dist/js/newOaApp.js"></script>

<script>
    window.onscroll = function(){
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
        //变量windowHeight是可视区的高度
        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
        //滚动条到底部的条件
        if(scrollTop+windowHeight==scrollHeight){
            //写后台加载数据的函数
            console.log("滚动到底部了");
        }
    }
</script>
</body>
</html>